<template>
	<view class="index">
		<!-- 1.轮播图 :当成Boolean 不是字符串-->
		<swiper :autoplay="true" indicator-dots circular>
			<swiper-item class="swiperItem" v-for="(item,idx) in bannerList" :key="idx">
				<image :src="item"></image>
			</swiper-item>
		</swiper>

		<!-- 2.按钮组合 750rpx 屏幕宽 @click="toTarget(item.title)" -->
		<view class="btnGroup">
			<view class="btnItem" v-for="item in btnList" :key="item.title" @click="go(item.path,item.isTabbar)">
				<text :class="item.iconClass"></text>
				<text>{{item.title}}</text>
			</view>
		</view>

		<!-- 3.今日动态 -->
		<view class="todayNews">
			<!-- 标题 -->
			<view class="commonTitle">--今日动态--</view>
			<!-- 新闻列表 -->
			<view class="newsList">
				<view class="newItem" v-for="(item) in newsList" :key="item.id" @click="toDetail(item.sourceUrl)">
					<view class="newsTitle">{{item.title}}</view>
					<view class="newsInfo">
						<text>{{item.infoSource}}</text>
						<text>{{item.pubDateStr}}</text>
						<!-- <text>{{item.riskarea.mid}}</text> -->

					</view>
				</view>
			</view>
		</view>

		<!-- 4.风险地区 -->
		<view class="risk">
			<!-- 标题 -->
			<view class="commonTitle1">--风险地区--</view>
			<!-- 高风险地区列表 -->
			<view class="higharea">
				<view class="title_h">高风险地区</view>
				<template v-if="newsListInfo_high.length>0">
					<view class="conten_high" v-for="(item) in newsListInfo_high">
						<text>{{item}}</text>
					</view>
				</template>
				<view v-if="newsListInfo_mid.length==0">暂无数据</view>
			</view>
			<!-- 中风险地区列表 -->
			<view class="midarea">
				<view class="title_m">中风险地区</view>
				<template v-if="newsListInfo_mid.length>0">
					<view class="conten_mid" v-for="(item) in newsListInfo_mid">
						<text>{{item}}</text>
					</view>
				</template>
				<view v-if="newsListInfo_mid.length==0">暂无数据</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// return的是一个对象
				// title: 'Hello'
				bannerList: [],
				btnList: [
					// 每个数组元素是一个对象
					{
						iconClass: "iconfont icon-shuju",
						title: "疫情数据",
						path: '../riskArea/riskArea',
						isTabbar: false
					},
					{
						iconClass: "iconfont icon-jubao",
						title: "匿名举报",
						path: '/pages/report/report',
						isTabbar: false
					},
					{
						iconClass: "iconfont icon-dengji",
						title: "报备登记",
						path: '/pages/check1/check1',
						isTabbar: true
					},
					{
						iconClass: "iconfont icon-shencha",
						title: "通行核查",
						path: '/pages/pass/pass',
						isTabbar: false
					},
					{
						iconClass: "iconfont icon-shouye",
						title: "联系社区",
						path: '/pages/contact/contact',
						isTabbar: true
					},
					{
						iconClass: "iconfont icon-24gl-newspaper",
						title: "新闻消息",
						path: '/pages/news/news',
						isTabbar: false
					}
				],
				newsList: [],
				newsListInfo_high: [],
				newsListInfo_mid: [],
				detailList: ['https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=2794216848689777073',
					'https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=2794216848689777073&toc_style_id=feeds_default',
					'https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=1819210359073772388',
					'https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=15039663520710962901&toc_style_id=feeds_default',
					'https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=17727373933472834810&toc_style_id=feeds_default',
					'https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=1819210359073772388'
				]
			}
		},
		onLoad() {
			this.getBannerList()
			this.getTodayNewsData()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
				console.log('下拉刷新函数执行了')
			}, 2000)
		},
		methods: {
			// 1.动态获取轮播图数据的方法
			getBannerList() {
				// 默认发送GET请求 
				uni.request({
					// 必填 URL success
					// url: "http://blog.coldworld.top:8081/statistic/banner",
					url: "http://localhost:8081/api/banner/getBanners",
					method: "GET",
					header: {
						// 请求头中携带token
						"token": 'xxxxxx'
					},
					// 请求成功的回调函数 用箭头函数 保证可以用this
					success: (res) => {
						this.bannerList = res.data.data
						// this.bannerList = res.data.data.banner
						// console.log(res.data.data.banner)
						console.log(res)
					}
				})
			},
			// 2.获取今日动态数据的方法
			getTodayNewsData() {
				uni.request({
					url: "https://api.tianapi.com/txapi/ncov/index?key=83fcdb1b0eaf62904f7869267cea8b97",
					method: "GET",
					success: (res) => {
						if (res.data.code == 200) {
							// 0属性的问题 √ web-view 在微信小程序里加载不出来问题 打电话
							// console.log(res)
							// console.log(res.data.newslist[0].news)
							// console.log(res.data.newslist[0].riskarea.high)
							// console.log(res.data.newslist[0].riskarea.mid)
							this.newsList = res.data.newslist[0].news
							if (res.data.newslist[0].riskarea) {
								this.newsListInfo_high = res.data.newslist[0].riskarea.high
								this.newsListInfo_mid = res.data.newslist[0].riskarea.mid
							}

						}
					}


				})
			},
			// 3.跳转到新闻详情页方法
			toDetail(sourceURL) {
				// 获取新闻内容详情链接
				console.log(sourceURL)
				// 跳转到新闻详情页面
				uni.navigateTo({
					url: "./detail?url=" + sourceURL
				})
			},
			// 4.各个按钮跳转到各个页面的方法 @click="toTarget(item.title)"
			toTarget(id) {
				// console.log(id)
				if (id == '疫情数据') {
					uni.navigateTo({
						url: "../riskArea/riskArea"
					})
				}
				if (id == '匿名举报') {
					// tabbar页面用 跳转
					uni.navigateTo({
						url: "../report/report"
					})
				}
				if (id == '报备登记') {
					uni.switchTab({
						url: "../check1/check1"
					})
				}
				if (id == '通行核查') {
					uni.navigateTo({
						url: "../pass/pass"
					})
				}
				if (id == '联系社区') {
					uni.switchTab({
						url: "../contact/contact"
					})
				}
				if (id == '新闻消息') {
					// https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=2794216848689777073
					// 生成1—5之间的随机数
					let random = Math.round(Math.random() * (5 - 1) + 1)
					console.log(random)
					uni.navigateTo({
						url: `./detail?url=${this.detailList[random]}`
					})
				}
			},
			// 5.优化后的各个按钮跳转到各个页面的方法
			go(url, isTabbar) {
				if (isTabbar) {
					uni.switchTab({
						// 两个一样url:url 简写 url
						url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
	// todo 1.疫情数据页面  2.新闻消息页面（可复用今日动态） 3个人中心页面 4.注册表单的校验
</script>
<!-- scss 支持类嵌套  插件市场安装-->
<style lang="scss">
	/* >子类选择器 选择的的image */
	// .swiperItem>image{
	// 	height: 100%;
	// 	width: 100%;
	// }
	.index {
		.swiperItem {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 按钮组合样式
	.btnGroup {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		// 一个按钮项
		.btnItem {
			width: 240rpx;
			height: 240rpx;
			// margin: 5rpx;
			margin-top: 10rpx;
			// 圆角
			border-radius: 10rpx;
			background-color: #1296bd;
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.iconfont {
				font-size: 80rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	// 今日动态样式
	.todayNews {
		.newsList {
			.newItem {
				padding: 20rpx 10rpx;
				border-bottom: 1px solid #eee;

				.newsTitle {
					font-size: 38rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.newsInfo {
					display: flex;
					justify-content: space-between;
					color: #999;
					font-size: 35rpx;
				}
			}
		}

		// 公共标题
		.commonTitle {
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
		}

	}

	//风险地区样式
	.risk {
		// border: solid blue 1px;
		// 圆角
		border-radius: 33rpx;

		// 公共标题
		.commonTitle1 {
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
		}

		.higharea {
			background-color: #ff4727;
			border-radius: 20rpx;

			.conten_high {
				// color: white;
			}

			.title_h {
				// text-align: center;
				color: #1269db;
			}
		}

		.midarea {
			border-radius: 20rpx;
			background-color: yellow;

			.conten_mid {
				// color: white;
			}

			.title_m {
				// text-align: center;
				color: #1269db;
			}
		}
	}
</style>
